<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>inweo.utils.drag test</title>
		<script src="../lib/mootools.js"></script>
		<script src="../inweo.js"></script>
		<style type="text/css">
			html, body {
				height: 1000px !important;
			}
			div.box {
				position: absolute;
				border: 2px dotted pink;
				background-color: #ddd;
				width: 300px;
				-moz-user-select: none;
				height: 100px;
				min-width: 30px;
				min-height: 30px;
				overflow: hidden;
				/*opacity: 0.5;*/
			}
			div.handler {
				background-color: yellow;
				position: relative;
				/*opacity: 0;*/
			}
			div.move {
				cursor: move;
				width: 100px;
				background-color: green;
				margin: 50px;
				color: white;
			}
			div.nResizer {
				cursor: n-resize;
				top: 0;
				position: absolute;
				height: 10px;
				width: 100%;
				background-color: yellow;
			}
			div.neResizer {
				cursor: ne-resize;
				right: 0;
				top: 0;
				position: absolute;
				height: 10px;
				width: 10px;
				z-index: 10;
				background-color: green;
			}
			div.eResizer {
				cursor: e-resize;
				right: 0;
				top: 0;
				position: absolute;
				height: 100%;
				width: 10px;
			}
			div.seResizer {
				cursor: se-resize;
				right: 0;
				bottom: 0;
				position: absolute;
				height: 10px;
				width: 10px;
				z-index: 10;
				background-color: green;
			}
			div.sResizer {
				cursor: s-resize;
				bottom: 0;
				position: absolute;
				height: 10px;
				width: 100%;
				background-color: yellow;
			}
			div.swResizer {
				cursor: sw-resize;
				left: 0;
				bottom: 0;
				position: absolute;
				height: 10px;
				width: 10px;
				z-index: 10;
				background-color: green;
			}
			div.wResizer {
				cursor: w-resize;
				bottom: 0;
				position: absolute;
				height: 100%;
				width: 10px;
				background-color: yellow;
			}
			div.nwResizer {
				cursor: nw-resize;
				left: 0;
				top: 0;
				position: absolute;
				height: 10px;
				width: 10px;
				z-index: 10;
				background-color: green;
			}
		</style>
		<script type="text/javascript">
			function main() {
				inweo.require("drag", "utils");

				var mv		= $$(".move")[0];
				var nR		= $$(".nResizer")[0];
				var neR		= $$(".neResizer")[0];
				var eR		= $$(".eResizer")[0];
				var seR		= $$(".seResizer")[0];
				var sR		= $$(".sResizer")[0];
				var swR		= $$(".swResizer")[0];
				var wR		= $$(".wResizer")[0];
				var nwR		= $$(".nwResizer")[0];

				var drag = new inweo.utils.drag($$(".box")[0]);
				drag.onDragStart(function() {
					var self = this;
					var calcMinHeight = function() {
						drag.minHeight	= parseFloat(inweo.getCSS(self.element, "min-height"));
					}
					var calcMinWidth = function() {
						drag.minWidth	= parseFloat(inweo.getCSS(self.element, "min-width"));
					}
					if (this.__handler === neR) {
						calcMinHeight();
					}
					if (this.__handler === nR) {
						calcMinHeight();
					}
					if (this.__handler === swR) {
						calcMinWidth();
					}
					if (this.__handler === wR) {
						calcMinWidth();
					}
					if (this.__handler === nwR) {
						calcMinHeight();
						calcMinWidth();
					}
				});
				drag.onBeforeDrag(function(x, y) {
					var self = this;
					var cancelOnNegativeValue = function(number, path) {
						if (number < 0) {
							self.cancel(path);
						}
					}
					var calcNewHeight = function() {
						var height		= parseFloat(self.element.style.height);
						drag.newHeight	= height + (y[0] - y[1]);
						if (drag.newHeight < drag.minHeight) {
							self.cancel(self.Y);
						}
					}
					var calcNewWidth = function() {
						var width		= parseFloat(self.element.style.width);
						drag.newWidth	= width + (x[0] - x[1]);
						if (drag.newWidth < drag.minWidth) {
							self.cancel(self.X);
						}
					}
					if (this.__handler === neR) {
						calcNewHeight();
						cancelOnNegativeValue(x[1]);
					}
					if (this.__handler === nR) {
						calcNewHeight();
					}
					if (this.__handler === swR) {
						calcNewWidth();
						cancelOnNegativeValue(y[1]);
					}
					if (this.__handler === wR) {
						calcNewWidth();
					}
					if (this.__handler === nwR) {
						calcNewHeight();
						calcNewWidth();
					}
					if (this.__handler === seR) {
						cancelOnNegativeValue(x[1]);
						cancelOnNegativeValue(y[1]);
					}
					if (this.__handler === eR) {
						cancelOnNegativeValue(x[1]);
						cancelOnNegativeValue(y[1]);
					}
					if (this.__handler === sR) {
						cancelOnNegativeValue(y[1]);
					}
				});
				drag.onDrag(function(x, y) {
					var self = this;
					var setHeight = function() {
						if (!isNaN(drag.newHeight)) {
							self.element.style.height = drag.newHeight + "px";
						}
					}
					var setWidth = function() {
						if (!isNaN(drag.newWidth)) {
							self.element.style.width = drag.newWidth + "px";
						}
					}
					if (this.__handler === neR) {
						setHeight();
					}
					if (this.__handler === nR) {
						setHeight();
					}
					if (this.__handler === swR) {
						setWidth();
					}
					if (this.__handler === wR) {
						setWidth();
					}
					if (this.__handler === nwR) {
						setWidth();
						setHeight();
					}
				});

				var move = new inweo.utils.drag.handler(drag, mv);

				var nResizer = new inweo.utils.drag.handler(drag, nR);
				nResizer.modify(null, "top");

				var neResizer = new inweo.utils.drag.handler(drag, neR);
				neResizer.modify("width", "top");

				var eResizer = new inweo.utils.drag.handler(drag, eR);
				eResizer.modify("width", null);

				var seResizer = new inweo.utils.drag.handler(drag, seR);
				seResizer.modify("width", "height");

				var sResizer = new inweo.utils.drag.handler(drag, sR);
				sResizer.modify(null, "height");

				var swResizer = new inweo.utils.drag.handler(drag, swR);
				swResizer.modify("left", "height");

				var wResizer = new inweo.utils.drag.handler(drag, wR);
				wResizer.modify("left", null);

				var nwResizer = new inweo.utils.drag.handler(drag, nwR);
				nwResizer.modify("left", "top");
			}
		</script>
	</head>
	<body>
		<div class="box" id="d1">
			<div class="move">hold to move!</div>
			<div class="handler"></div>
			<div class="handler nResizer"></div>
			<div class="handler neResizer"></div>
			<div class="handler eResizer"></div>
			<div class="handler seResizer"></div>
			<div class="handler sResizer"></div>
			<div class="handler swResizer"></div>
			<div class="handler wResizer"></div>
			<div class="handler nwResizer"></div>
		</div>
	</body>
</html>